<template>
  <t-modal
    title="关联ERP系统"
    width="1486px"
    :visible="visible"
    @cancel="closeModal()"
    @ok="onSubmit()"
    wrapClassName="add-modal-container"
    forceRender
    :confirm-loading="submitLoading"
  >
    <div class="curve-modal-body">
      <div class="condition-warp">
        <!-- 项目名称 -->
        <a-input
          style="width:350px;"
          placeholder="请输入项目名称"
          v-model="condition.proName"
        ></a-input>
        <!-- 项目编号 -->
        <a-input
          style="width:350px;margin: 0 16px;"
          placeholder="请输入项目编号"
          v-model="condition.proCode"
        ></a-input>
        <!-- 工程类型 -->
        <a-select
          showSearch
          allowClear
          placeholder="请选择工程类型"
          :loading="condition.typeLoading"
          :filter-option="filterOption"
          v-model="condition.engType"
          style="width:350px;margin-right:20px;"
          @change="getTableData()"
        >
          <a-select-option
            :value="item.dicItemCode"
            v-for="item in condition.typeSource"
            :key="item.uuid"
          >
            {{ item.dicItemName }}
          </a-select-option>
        </a-select>
        <a-button class="cu-btn-primary" icon="search" @click="getTableData()">
          查询
        </a-button>
        <a-button class="cu-btn-filter" icon="reload" @click="reset()">
          重置
        </a-button>
      </div>

      <!-- table -->
      <div class="table-container">
        <a-radio-group v-model="checkUUID">
          <vxe-table
            ref="xTable"
            height="100%"
            align="left"
            show-overflow
            show-header-overflow
            border="inner"
            :data="tableData"
            :column-config="{ resizable: true }"
            size="small"
            :loading="loading"
          >
            <vxe-column
              type="seq"
              width="80"
              title="序号"
              align="center"
            ></vxe-column>
            <vxe-column field="proName" min-width="200" title="项目名称">
            </vxe-column>
            <vxe-column field="proCode" width="200" title="项目编号">
            </vxe-column>
            <vxe-column field="engTypeDesc" width="150" title="工程类型">
            </vxe-column>
            <vxe-column field="workArea" width="220" title="省市县">
              <template #default="{ row }">
                {{ replaceStr(row.workArea) }}
              </template>
            </vxe-column>
            <vxe-column field="proStatusDesc" width="150" title="项目状态">
              <!-- <template #default="{ row }">
              <div class="status-td">
                未开始
              </div>
            </template> -->
            </vxe-column>
            <vxe-column field="proLevelDesc" width="150" title="项目等级">
            </vxe-column>
            <vxe-column field="constructionScale" width="150" title="项目规模">
            </vxe-column>
            <vxe-column
              field="operate"
              width="60"
              title="操作"
              fixed="right"
              align="center"
            >
              <template #default="{ row }">
                <a-radio :value="row.uuid"></a-radio>
              </template>
            </vxe-column>
          </vxe-table>
        </a-radio-group>
      </div>

      <!-- 分页 -->
      <div class="table-pager">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
  </t-modal>
</template>

<script>
import { axios } from "@/utils/request";
import { getDicItemByCode } from "@/api/common.js";
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      checkUUID: "",
      loading: false,
      submitLoading: false,
      //查询条件
      condition: {
        //项目名称
        proName: "",
        //项目编号
        proCode: "",
        //工程类型
        typeLoading: false,
        typeSource: [],
        engType: undefined,
      },
      tableData: [],
      pager: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getEngTypeData();
          this.getTableData();
        }
      },
      immediate: true,
    },
  },

  methods: {
    //
    replaceStr(str) {
      return str.replace(/@/g, ">");
    },

    //重置
    reset() {
      this.condition.proName = "";
      this.condition.proCode = "";
      this.condition.engType = undefined;
      this.getTableData();
    },

    //查询工程类型
    getEngTypeData() {
      this.condition.typeLoading = true;
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "engineeringType" })
          .then((res) => {
            let { data } = res;
            this.condition.typeSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.condition.typeSource = [];
            reject();
          })
          .finally((_) => {
            this.condition.typeLoading = false;
          });
      });
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { proName, proCode, engType } = this.condition;
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/mdata/sysProject/queryAssociatedErpProjectsPage?page=${page}&pageSize=${pageSize}`,
            { proName, proCode, engType },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.tableData = data?.rows || [];
            this.pager.total = data?.totalCount || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    onSubmit() {
      let { checkUUID } = this;
      let { uuid } = this.row;
      if (!checkUUID) {
        this.$message.warning("请选择您要关联的项目");
        return;
      }
      this.submitLoading = true;
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/mdata/sysProject/associatedErpProjects`,
            { oldUuid: uuid, newUuid: checkUUID },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            if (res.statusCode === 200) {
              this.$message.success("关联成功！");
              this.closeModal();
              this.$parent.getTableData();
            } else {
              this.$message.error(res.message);
            }
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {
            this.submitLoading = false;
          });
      });
    },

    //关闭
    closeModal() {
      this.condition.proName = "";
      this.condition.proCode = "";
      this.condition.engType = undefined;
      this.submitLoading = false;
      this.checkUUID = "";
      this.$emit("update:visible", false);
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
    .curve-modal-body {
      box-sizing: border-box;
      height: 670px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 24px 24px 0 24px;
      .condition-warp {
        display: flex;
        margin: 0 0 13px 0;
        flex-shrink: 0;
        .project-select {
          margin-right: 20px;
        }
      }
      .table-container {
        flex: 1;
        overflow: hidden;
        .ant-radio-group {
          height: 100%;
          overflow: hidden;
          width: 100%;
        }
        .status-td {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #333;
          &::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #8c8c8c;
            border-radius: 50%;
            margin-right: 8px;
          }
        }
      }
    }
  }
}
</style>
